layui.use(['laydate', 'form', 'table'], function () {
    var laydate = layui.laydate;
    var form = layui.form;
    var table = layui.table;

    //后台数据表格
    table.render({
        elem: '#userTbale'
        , cellMinWidth: 100 //layui 2.2.1 新增 全局定义所有常规单元格的最小宽度
        , url: '/user/queryAndAdd' //数据接口
        , parseData: function (res) { //res 即为原始返回的数据
            return {
                "code": res.status, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.total, //解析数据长度
                "data": res.list //解析数据列表
            };
        }
        , page: true //开启分页
        , cols: [[ //表头
            {field: 'id', title: 'ID', align: 'center', width: 80, sort: true}
            , {field: 'username', title: '用户名', align: 'center', width: 80}
            , {field: 'email', title: '邮箱', align: 'center', width: 200}
            , {field: 'sex', title: '性别', align: 'center', width: 85, sort: true, templet:function (d) {
                    if (d.sex == 0) {
                        return "男";
                    } else if (d.sex == 1) {
                        return "女";
                    } else {
                        return "保密";
                    }
                }}
            , {field: 'birthday', title: '生日', align: 'center', width: 110, sort: true}
            , {field: 'hobby', title: '爱好', align: 'center', width: 245}
            , {field: 'phone', title: '电话', align: 'center', width: 130}
            , {field: 'site', title: '地址', align: 'center', width: 240}
            , {field: 'gmtCreate', title: '创建时间', align: 'center', width: 160, sort: true}
            // , {field: 'gmtModified', title: '修改时间', align: 'center', width: 160, sort: true}
            , {field: 'state', title: '状态', align: 'center', width: 118, templet:function (d) {
                    if (d.state == 0) {
                        return '<input type="checkbox" name="state" id="state" value="0"  lay-skin="switch" lay-filter="switchID" userId="'+d.id+'" lay-text="启用|停用" checked />';
                    } else {
                        return '<input type="checkbox" name="state" id="state" value="0"  lay-skin="switch" lay-filter="switchID" userId="'+d.id+'" lay-text="启用|停用" />';
                    }
                }}
            , {fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#barUser'}
        ]],
        toolbar: true
    });

    //监听行工具事件
    table.on('tool(userTbale)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'edit') {
            // layer.msg('编辑操作' + data.id);
            sessionStorage.setItem('id',data.id);
            xadmin.open('编辑', 'user-edit.html', 600, 400);
        } else if (layEvent === 'updateUser') {
            // layer.msg('修改密码' + data.id);
            sessionStorage.setItem('id',data.id);
            xadmin.open('修改密码', 'user-password.html', 600, 400)
        } else if (layEvent === 'deleteUser') {
            // layer.msg('删除操作' + data.id);
            member_del(obj, data.id)
        }
    });

    //自定义验证规则
    form.verify({
        gmtCreate: function (value) {
            if (($('#end').val() != '') && ($('#start').val() == '')) {
                return '开始日期不能为空';
            }
        },
        gmtCut: function (value) {
            if (($('#start').val() != '') && ($('#end').val() == '')) {
                return '截止日期不能为空';
            }
        }
    });

    //模糊查询
    form.on('submit(search)',function (data) {
        // console.log(data.field);
        //发送异步请求获取对应数据
        // 爱好是否选中
        var arr_box = [];
        $("#hobby :checkbox").each(function () {
            var isCheck = $(this).prop("checked");
            if ('checked' == isCheck || isCheck) {
                arr_box.push(this.title);
            }
        });
        //赋值
        data.field.hobby = arr_box.toString();
        flushTable(data.field);
        return false;
    })

    /*用户-停用或启用*/
    form.on('switch(switchID)',function (data) {
        // 开关是否开启 true或false
        var checked = data.elem.checked;
        // 获取需要更改的用户ID
        var userId = data.elem.attributes['userId'].nodeValue;
        // console.log(userId);
        // 获取checked值(需要修改的状态值)
        var state = $("#state").val();
        if (checked) {
            // console.log(checked);
            // console.log("首次获取："+state);
            $.ajax({
                type: 'post',
                url: '/user/FindByNameOrUpdateState',
                data: {'id':userId,'state':state},
                success: function (data) {
                    if (data.message == "success") {
                        layer.msg('此会员账户已启用！', {icon: 1, time: 1100,end:function () {
                                // 可以对父窗口进行刷新
                                // xadmin.father_reload();
                            }});
                        return false;
                    }
                    layer.msg('此会员账户启用失败！', {icon: 2, time: 1100,end:function () {
                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        }});
                    return false;
                },
                error: function () {
                    layer.msg('请求接口异常！', {icon: 0, time: 1100,end:function () {
                            // 可以对父窗口进行刷新
                            // xadmin.father_reload();
                        }});
                    return false;
                }
            });
            return;
        } else {
            state = 1;
            // console.log(checked);
            console.log(state);
            $.ajax({
                type: 'post',
                url: '/user/FindByNameOrUpdateState',
                data: {'id':userId,'state':state},
                success: function (data) {
                    if (data.message == "success") {
                        layer.msg('此会员账户已停用！', {icon: 1, time: 1100,end:function () {
                                // 可以对父窗口进行刷新
                                // xadmin.father_reload();
                            }});
                        return false;
                    }
                    layer.msg('此会员账户停用失败！', {icon: 2, time: 1100,end:function () {
                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        }});
                    return false;
                },
                error: function () {
                    layer.msg('请求接口异常！', {icon: 0, time: 1100,end:function () {
                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        }});
                    return false;
                }
            });
            return;
        }
    })

    //日期范围
    laydate.render({
        elem: '#start-end',
        trigger: 'click', //采取事件弹出
        //设置开始日期、日期日期的 input 选择器
        //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
        range: ['#start', '#end']
    });
    //生日日期
    laydate.render({
        elem: '#birthday', //指定元素
        trigger: 'click' //采取事件弹出
    });
});

// 会员页面数据渲染
function flushTable(data) {
    layui.use(['table'], function () {
        var table = layui.table;

        //后台数据表格
        table.render({
            elem: '#userTbale'
            , cellMinWidth: 100 //layui 2.2.1 新增 全局定义所有常规单元格的最小宽度
            , url: '/user/queryAndAdd' //数据接口
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.list //解析数据列表
                };
            }
            , page: true //开启分页
            , where: data
            , cols: [[ //表头
                {field: 'id', title: 'ID', align: 'center', width: 80, sort: true}
                , {field: 'username', title: '用户名', align: 'center', width: 80}
                , {field: 'email', title: '邮箱', align: 'center', width: 200}
                , {field: 'sex', title: '性别', align: 'center', width: 85, sort: true, templet:function (d) {
                        if (d.sex == 0) {
                            return "男";
                        } else if (d.sex == 1) {
                            return "女";
                        } else {
                            return "保密";
                        }
                    }}
                , {field: 'birthday', title: '生日', align: 'center', width: 110, sort: true}
                , {field: 'hobby', title: '爱好', align: 'center', width: 245}
                , {field: 'phone', title: '电话', align: 'center', width: 130}
                , {field: 'site', title: '地址', align: 'center', width: 240}
                , {field: 'gmtCreate', title: '创建时间', align: 'center', width: 160, sort: true}
                // , {field: 'gmtModified', title: '修改时间', align: 'center', width: 160, sort: true}
                , {field: 'state', title: '状态', align: 'center', width: 118, templet:function (d) {
                        if (d.state == 0) {
                            return '<input type="checkbox" name="state" id="state" value="0"  lay-skin="switch" lay-filter="switchID" userId="'+d.id+'" lay-text="启用|停用" checked />';
                        } else {
                            return '<input type="checkbox" name="state" id="state" value="0"  lay-skin="switch" lay-filter="switchID" userId="'+d.id+'" lay-text="启用|停用" />';
                        }
                    }}
                , {fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#barUser'}
            ]],
            toolbar: true
        });

    });
}

/*会员-删除*/
function member_del(obj,id) {
    layer.confirm('确认要删除吗？', function (index) {
        // console.log(obj);
        //发异步删除数据
        $.post('/user/FindByIdDeletetUser',{'id':id},function (data) {
            if (data.message == "success") {
                obj.del(); //保持原页面不动,只将删除的移除即可
                layer.msg('已删除!', {icon: 1, time: 1000});
                return;
            }
            layer.msg('未删除!', {icon: 2, time: 1000});
            return;
        })
        return;
    });
}